{% load static %}
{% load route %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ course_object.title }} - 5xClass源代码官网</title>
    <link rel="shortcut icon" href="{% static 'images/icon32.png' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'css/play.css' %}">
    <style>
        .play-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .play-box > .tips {
            font-size: 14px;
            color: #c0c0c0;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .play-box > .tips > a > .vip {
            width: 64px;
            height: 28px;
            background: #ffc210;
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
            transition: all .2s ease-in-out;
            cursor: pointer;
            outline: none;
            border: none;
        }

        .play-box > .tips > p {
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div class="video-box">
    <div class="video-left">
        <div class="section-number">
            <a class="back" href="{% gen_back_url request 'index' %}">
                <img src="//hcdn2.luffycity.com/media/frontend/activity/back_1564141039.4734588.svg">返回
            </a>
            <h1>无播放视频</h1>
        </div>
        <div class="play-box">
            <div class="tips">
                <p>开通会员，获得所有课程观看权限</p>
                <a href="{% url 'vip' %}">
                    <button class="vip" href="">开通会员</button>
                </a>
            </div>
        </div>
    </div>
    <div class="nav-bar">
        <div class="column">
            <div class="top-menu">
                <div class="section-name">
                    <p class="name">{{ course_object.title }}</p>
                    <p class="num">共{{ video_count }}个课时</p>
                    <div>
                        <p class="item">模块总时长：{{ total_duration_string }}</p>
                    </div>
                </div>

                <div class="switch-list">
                    <span class="active-tab">课程大纲</span>
                </div>

            </div>
            <div class="chapter-box">
                <ul>
                    {% for chapter, video_list in play_dict.items %}
                        <li class="chapter">
                            <div class="chapter-title">{{ chapter }}</div>
                            <ul>
                                {% for item  in video_list %}
                                    <a href="#">
                                        <li>
                                            <div class="section unactive">
                                                <section>
                                                    <div class="status">
                                                        <p class=""></p>
                                                    </div>
                                                    <h5 class="section-number">{{ item.title }}</h5>
                                                </section>
                                                <section>
                                                    <span class="section-time">{{ item.duration }}</span>
                                                    <img src="//hcdn2.luffycity.com/media/frontend/activity/play4_1564141041.0898001.svg"
                                                         class="play2">
                                                </section>
                                            </div>
                                        </li>
                                    </a>
                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
</body>
</html>